<template>
	<view class="wrap">
		<view class="load" v-if="!loading">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="coupon_list" v-if="couponList.length">
				<view class="coupon_cell" v-for="(item,index) in couponList" :key="item.ID" :style="item.Status!=0?'opacity: 0.5;':''">
					<view class="coupon_header">
						<view class="header_price">
							<text>￥</text>
							{{item.Price}}
						</view>
						<view class="header_lit">
							{{item.Discount == 0? '无门槛':`满${item.Discount}可用`}}
						</view>
					</view>
					<view class="coupon_intel">
						<view class="intel_main">
							<view class="intel_tit">
								{{item.Title || '--'}}
							</view>
							<view class="intel_time">
								有效期至：{{$util.formatDateTimeYMD(item.EndDate)}}
							</view>
						</view>
						<view class="intel_btn" v-if="item.Status==0" @click="gotoPay(item.ProductID)">
							去使用
						</view>
						<block v-if="item.Status==1">
							<!-- <view class="intel_btn intel_btn_use">
								已使用
							</view> -->
							
							<view class="intel_use">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1740042238608572.png" mode="aspectFill"></image>
							</view>
						</block>
						
					</view>
				</view>
				
				<!-- <view class="coupon_item" v-for="(item) in couponList" :key="item.ID" :style="{backgroundImage:'url('+item.Banner+')'}">
					<view class="couponTop">
						<view class="topTitle">
							<view class="couTitle">{{item.Title}}</view>
							<view class="couponPrice couRight"><text class="priceText">¥</text><text
									class="priceNum">{{ item.Price }}</text></view>
						</view>
						<view class="topContent">
							<view class="couponTime">有效期至：{{$util.formatDateTimeYMD(item.EndDate)}}</view>
							<view class="couponUse couRight">{{item.Discount == 0? '无门槛':`满${item.Discount}可用`}}</view>
						</view>
					</view>
					<view class="couponBottom"></view>
				</view> -->
			</view>
			<BtmLogo></BtmLogo>
		</block>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			couponList:[],
			loading:false
		};
	},
	onLoad(e) {

	},
	onShow() {
		this.init()

	},
	computed: {

	},
	methods: {
		async init() {
			await this.getCouponList()
		},
		async getCouponList() {
			const that = this
			const res = await that.$api.post('/Coupon/MyAllCoupons');
			const { code, data } = res
			console.log(res,'rr');
			
			if (code == 0) {
				that.couponList = data
				// this.couponList.forEach(item=>item.Status=1)
				setTimeout(()=>{
					this.loading = true;
				},300)
			}
		},
		gotoPay(ProductID){
			if(!ProductID){
				uni.switchTab({
					url:'/pages/tab/home'
				})
				return
			}
			this.nav_to(`/pages/shop/detail?id=${ProductID}`)
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}

view {
	box-sizing: border-box;
}

image {
	width: 100%;
	height: 100%;
	display: block;
}

.wrap {
	width: 100%;

	.coupon_list {
		width: 100%;
		padding: 24rpx;

		.coupon_item {
			width: 100%;
			padding: 34rpx 24rpx;
			background-color: white;
			margin-bottom: 24rpx;
			border-radius: 24rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.couRight {
				width: 200rpx;
			}

			.couponTop {
				width: 100%;
				padding-bottom: 32rpx;


				.topTitle {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.couTitle {
						color: #282828;
						font-size: 38rpx;
						font-weight: bold;
					}

					.couponPrice {
						display: flex;
						justify-content: flex-end;
						align-items: baseline;

						.priceText {
							color: #df5d4d;
							font-weight: bold;
							font-size: 30rpx;
						}

						.priceNum {
							color: #df5d4d;
							font-weight: bold;
							font-size: 58rpx;
						}
					}
				}

				.topContent {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.couponTime {
						font-size: 26rpx;
						color: #df5d4d;
					}

					.couponUse {
						text-align: right;
						font-size: 26rpx;
						color: #df5d4d;
					}
				}
			}
		}
		
		.coupon_cell{
			background: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1740023363453242.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			padding: 24rpx 12rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.coupon_header{
				width: 25%;
				.header_price{
					color: #df5d4d;
					font-weight: bold;
					font-size: 58rpx;
					text-align: center;
					text{
						color: inherit;
						font-weight: bold;
						font-size: 30rpx;
					}
				}
				.header_lit{
					text-align: center;
					font-size: 22rpx;
					color: #df5d4d;
				}
			}
			.coupon_intel{
				width: 70%;
				display: flex;
				align-items: center;
				position: relative;
				.intel_main{
					flex: 1;
					margin-right: 12rpx;
					.intel_tit{
						font-size: 28rpx;
						font-weight: bold;
					}
					.intel_time{
						margin-top: 24rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
				.intel_btn{
					padding: 12rpx 24rpx;
					background: #FF6030;
					border-radius: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 9;
				}
				.intel_btn_use{
					background-color: #999;
				}
				.intel_use{
					position: absolute;
					top: 50%;
					right: 0rpx;
					transform: translate(0,-50%);
					image{
						width: 150rpx;
						height: 150rpx;
					}
				}
			}
		}
	}
}
</style>
